<template>
  <div class="">
    <span>名称</span>
    <el-input v-model="input" placeholder="属性名称"></el-input>
    <span>分类</span>
    <el-button type="primary" @click="checkout">查询</el-button>
    <el-button type="primary">添加</el-button>
    <el-select v-model="value" placeholder="请选择" @change="Changevlaue">
      <el-option
        v-for="(item, index) in CategoryList"
        :key="arr[index]"
        :label="item"
        :value="index"
      >
      </el-option>
    </el-select>
    <el-table :data="AttributeApi" border style="width: 100%">
      <el-table-column
        prop="attribute_category_id"
        label="id"
      ></el-table-column>
      <el-table-column
        :data="AttributeApi"
        prop="name"
        label="属性名称"
      ></el-table-column>
      <el-table-column :data="AttributeApi" label="属性分类">
        <template slot-scope="scope">
          {{ CategoryList[scope.row.attribute_category_id] }}
        </template>
      </el-table-column>
      <el-table-column :data="AttributeApi" label="操作"
        >``
        <el-button type="primary">编辑</el-button>
      </el-table-column>
    </el-table>
    <el-upload
      class="avatar-uploader"
      action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
      :headers="headers"
      name="good_pic"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>
 
<script>
import { AttributeApi, Category } from "../../../../../request/api";
export default {
  data() {
    return {
      value: "",
      input: "",
      AttributeApi: [],
      CategoryList: [],
      arr: [],
      arrIndex: "",
      imageUrl: "",
      headers: {
        "X-Nideshop-Token": localStorage.getItem("token"),
      },
    };
  },
  created() {
    //列表数据请求
    AttributeApi({
      page: "1",
      size: "10",
    }).then((res) => {
      this.AttributeApi = res.data.data;
    }),
      Category().then((res) => {
        this.CategoryList = res.data.reduce((prev, current) => {
          prev[current.id] = current.name;

          return prev;
        });
        // console.log(this.CategoryList);
        for (let i in this.CategoryList) {
          this.arr.push(i);
        }
        console.log(this.arr);
      });
  },
  methods: {
    checkout() {
      AttributeApi({
        page: "1",
        size: "10",
        name: this.input,
        //先获取选中值的id
        c_id: this.arrIndex,
      }).then((res) => {
        this.AttributeApi = res.data.data;
      });
    },
    Changevlaue(key) {
      this.arrIndex = key;
    },
    //attribute.vue
    handleAvatarSuccess(res, file) {
      console.log(res);
      if (res.errno == 0) {
        this.imageUrl = res.data.fileUrl;
      }
    },
    beforeAvatarUpload(file) {},
    handleClick(scope) {
      console.log("点击");
      console.log(scope);
    },
   
  
  //编辑跳转
 
  },
};
</script>
 
<style lang = "less" scoped>
.el-input {
  padding-top: 10px;
  padding-bottom: 10px;
  width: 188px;
  height: 33px;
  box-sizing: border-box;
  padding: 10px;
}
/*  */

</style>